<!--
[{id: '', goodsId: '', name: ''}]
-->
<template>
  <el-dialog
    title="碧划算商品库"
    :visible.sync="showGoodsPop"
    class="el-dialog-edit"
    :close-on-click-modal="false"
  >
    <!-- <el-form label-position="left" label-width="100px" style="width: 100%; padding-left: 20px;">
      <el-form-item label="所选商品：" v-if="count !== 1">
        <div class="el-tag-box">
          <el-tag
            v-for="(goods, index) of goodsCheck"
            :key="goods.id"
            :closable="true"
            @close="delGoods(index)"
          >{{goods.name}}</el-tag>
        </div>
      </el-form-item>
    </el-form>-->
    <!-- <el-form
      ref="searchForm"
      class="search-block"
      :model="listQuery"
      label-position="left"
      label-width="100px"
      style="width: 100%"
    >
    <input type="text" style="display: none" />-->
    <!--form input placeholder-->
    <!-- <el-row :gutter="50">
        <el-col :xs="24">
          <el-form-item label="商品ID：" prop="name">
            <el-input
              @keyup.enter.native="search"
              v-model="listQuery.favoritesId"
              placeholder="按商品ID搜索"
              maxlength="50"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
    </el-row>-->
    <!-- <el-form-item label class="btn-item">
        <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
      </el-form-item>
    </el-form>-->
    <el-table
      :data="list"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      @row-click="clickRow"
    >
      <el-table-column
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          <label
            class="input-radio"
            v-if="count === 1"
          >
            <input
              type="radio"
              :value="{...scope.row}"
              v-model="goodsCheck"
            />
            <span></span>
          </label>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="商品栏目ID"
        min-width="110"
      >
        <template slot-scope="scope">
          <div class="text-justify">
            <span>{{scope.row.id}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="类型"
        width="110"
      >
        <template slot-scope="scope">
          <span>{{scope.row.type === "TAG_TOPIC" ? "精选类型" : "热门活动"}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="topicid/activityid"
      >
        <template slot-scope="scope">
          <span>{{scope.row.topicId}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="栏目名"
      >
        <template slot-scope="scope">
          <span>{{scope.row.topicName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="活动开始时间"
      >
        <template slot-scope="scope">
          <span>{{scope.row.startTime}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="活动结束时间"
      >
        <template slot-scope="scope">
          <span>{{scope.row.endTime}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="添加时间"
      >
        <template slot-scope="scope">
          <span>{{scope.row.createdAt}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="状态"
      >
        <template slot-scope="scope">
          <span>{{scope.row.deleteFlag===1?'有效':'无效'}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.pageIndex"
      :page-size="listQuery.pageSize"
      background
      layout="total, prev, pager, next, jumper"
      style="text-align: center"
      :total="listTotal"
    ></el-pagination>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        :loading="btnDisabled"
        @click="chooseGoods"
      >确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getTkTagsList } from '@/api/bihuasuan/goods'
export default {
  name: 'b-goodstags',
  props: {
    check: {
      type: Array,
      default() {
        return []
      }
    },
    count: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      list: [],
      listQuery: {
        pageNum: 1,
        pageSize: 8
      },
      showGoodsPop: true,
      goodsCheck: this.check,
      goodsRadio: {},
      listTotal: 0,
      listLoading: false,
      btnDisabled: false,
      goodsDetail: {}
    }
  },
  created() {
    this.getList()
    if (this.count === 1 && this.check.length > 0) {
      this.goodsRadio = this.check[0]
    }
  },
  methods: {
    // 获取列表
    async getList() {
      this.listLoading = true
      try {
        const { data } = await getTkTagsList(this.listQuery)
        this.list = data.list
        this.listTotal = data.total
        this.listLoading = false
      } catch (error) {
        this.list = []
        this.listLoading = false
        console.log(error)
      }
    },
    // 单击行
    clickRow(val) {
      this.goodsCheck = val
    },
    // 通过tag删除
    // delGoods(index) {
    //   this.goodsCheck.splice(index, 1);
    // },
    // 选择商品
    chooseGoods() {
      if (this.goodsCheck.length < 1) {
        return this.$message.error('请选择商品栏目')
      }
      if (this.count > 0 && this.goodsCheck.length > this.count) {
        return this.$message.error(`最多选择${this.count}个商品栏目`)
      }
      this.$emit('choose', this.goodsCheck)
      this.close()
    },
    // 关闭弹窗
    close() {
      this.showGoodsPop = false
      document.body.removeChild(this.$el)
    },
    // 搜索
    search() {
      this.listQuery.pageIndex = 1
      this.getList()
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageIndex = page
      this.getList()
    }
  }
}
</script>
